<template>
  <div>
    <h1>Items from Server</h1>
    <p v-if="error">Failed to receive items. {{ error }}</p>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <h1>File dialog</h1>
    <button @click="open">Show Open Dialog</button>
    <button @click="save">Show Save Dialog</button>
    <p><strong>Selected File(s)</strong>: {{ selectedFile }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: null,
      items: [],
      count: 0,
      selectedFile: 'None'
    }
  },
  created() {
    this.$http.get('/api/items')
        .then(response => {
          this.items = response.data;
          this.$log.info('Received items from server.')
        }).catch(error => {
      this.error = error
    })
  },
  methods: {
    increase() {
      this.count++;
      this.$interop.setBadgeCount(this.count);
    },
    decrease() {
      if (this.count > 0) {
        this.count--;
        this.$interop.setBadgeCount(this.count);
      }
    },
    open() {
      this.$interop.showOpenDialog({
        properties: ['openFile', 'multiSelections']
      }).then(result => this.selectedFile = result.filePaths);
    },
    save() {
      this.$interop.showSaveDialog({})
          .then(result => this.selectedFile = result.filePath);
    }
  }
}
</script>
